
<script type="text/javascript"><!--
var form = "";
var submitted = false;
var error = false;
var error_message = "";

function check_input(field_name, field_size, message) {
  if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
    var field_value = form.elements[field_name].value;

    if (field_value.length < field_size) {
      error_message = error_message + "* " + message + "\n";
      error = true;
    }
  }
}

function check_radio(field_name, message) {
  var isChecked = false;

  if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
    var radio = form.elements[field_name];

    for (var i=0; i<radio.length; i++) {
      if (radio[i].checked == true) {
        isChecked = true;
        break;
      }
    }

    if (isChecked == false) {
      error_message = error_message + "* " + message + "\n";
      error = true;
    }
  }
}

function check_select(field_name, field_default, message) {
  if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
    var field_value = form.elements[field_name].value;

    if (field_value == field_default) {
      error_message = error_message + "* " + message + "\n";
      error = true;
    }
  }
}

function check_password(field_name_1, field_name_2, field_size, message_1, message_2) {
  if (form.elements[field_name_1] && (form.elements[field_name_1].type != "hidden")) {
    var password = form.elements[field_name_1].value;
    var confirmation = form.elements[field_name_2].value;

    if (password.length < field_size) {
      error_message = error_message + "* " + message_1 + "\n";
      error = true;
    } else if (password != confirmation) {
      error_message = error_message + "* " + message_2 + "\n";
      error = true;
    }
  }
}

function check_form() {
  if (submitted == true) {
    alert("This form has already been submitted. Please press Ok and wait for this process to be completed.");
    return false;
  }

  error = false;  
  form = document.create_account;
  error_message = "Errors have occured during the process of your form.\n\nPlease make the following corrections:\n\n";

  check_radio("gender", "Please select your Gender.");

  check_input("firstName", 2, "Your First Name must contain a minimum of 2 characters.");
  check_input("lastName", 2, "Your Last Name must contain a minimum of 2 characters.");

  check_input("dob", 10, "Your Date of Birth must be in this format: MM/DD/YYYY (eg 05/21/1970)");

  check_input("email", 6, "Your E-Mail Address must contain a minimum of 6 characters.");
  check_input("street", 5, "Your Street Address must contain a minimum of 5 characters.");
  check_input("zipCode", 4, "Your Post Code must contain a minimum of 4 characters.");
  check_input("city", 3, "Your City must contain a minimum of 3 characters.");

  check_input("state", 2, "Your State must contain a minimum of 2 characters.");

  check_select("country", "", "You must select a country from the Countries pull down menu.");

  check_input("telephone", 3, "Your Telephone Number must contain a minimum of 3 characters.");

  check_password("password", "confirmation", 5, "Your Password must contain a minimum of 5 characters.", "The Password Confirmation must match your Password.");
  check_password("password_new", "password_confirmation", 5, "Your new Password must contain a minimum of 5 characters.", "The Password Confirmation must match your new Password.");

  if (error == true) {
    alert(error_message);
    return false;
  } else {
    submitted = true;
	
	form.actionForm.value="submit";
	form.submit();
    return true;
  }
}

//--></script>
<script type="text/javascript">
<!--

//-->
var olderCountryId=-1;
function selectCountryChange(countryId)
{
	
	if(olderCountryId==countryId) return;
	olderCountryId=countryId;
		
		$.ajax({
			  url: '<{$APPLICATION_URL}>/<{$ownerName}>Ajax/statebycountry',
			  data: 'countryId='+countryId,
			  type: 'post',
			  success: function(result)
			  {
				
				  $("#ajaxState").html(result);
				  
			  },
			});
}	
</script>
<h1>Customer Registration</h1>
<p>
	<font color="#FF0000"><small><strong>NOTE:</strong> </small> </font> If
	you already have an account with us, please login at the <a
		href="<{$APPLICATION_URL}>/Login/index"><u>login page</u>
	</a>.
</p>

<form name="create_account"
	action="<{$APPLICATION_URL}>/<{$ownerName}>Login/signup" method="post">
	<div class="contentContainer">
		<span class="inputRequirement" style="float: right;">* Required
			information</span>
		<h2>Your Account</h2>
		<div style="color:red;">
		<{$error}>
		</div>
		<div class="contentText">
			<table border="0" cellspacing="2" cellpadding="2" width="100%">
				<tr>
					<td class="fieldKey">Username:</td>
					<td class="fieldValue"><input type="text" name="username"
						value="<{$username}>" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">Password:</td>
					<td class="fieldValue"><input type="password" name="password"
						maxlength="40" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">Password Confirmation:</td>
					<td class="fieldValue"><input type="password" name="confirmation"
						maxlength="40" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
			</table>
		</div>
		<div>
			<h2>Your Personal Details</h2>
		</div>
		<div class="contentText">
			<table border="0" cellspacing="2" cellpadding="2" width="100%">
				<tr>
					<td class="fieldKey">Gender:</td>
					<td class="fieldValue"><input type="radio" name="gender" value="m" />&nbsp;&nbsp;Male&nbsp;&nbsp;<input
						type="radio" name="gender" value="f" />&nbsp;&nbsp;Female&nbsp;<span
						class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">First Name:</td>
					<td class="fieldValue"><input type="text" name="firstName"
						value="<{$firstName}>" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">Last Name:</td>
					<td class="fieldValue"><input type="text" name="lastName"
						value="<{$lastName}>" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">Date of Birth:</td>
					<td class="fieldValue"><input type="text" name="dob" id="dob"
						value="<{$birthday}>" />&nbsp;<span class="inputRequirement">*
							(eg. 05/21/1970)</span> <script type="text/javascript">$('#dob').datepicker({dateFormat: 'yy/mm/dd', changeMonth: true, changeYear: true, yearRange: '-100:+0'});</script>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">E-Mail Address:</td>
					<td class="fieldValue"><input type="text" name="email"
						value="<{$email}>" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
			</table>
		</div>
		<h2>Your Address</h2>
		<div class="contentText">
			<table border="0" cellspacing="2" cellpadding="2" width="100%">
				<tr>
					<td class="fieldKey">Company:</td>
					<td class="fieldValue"><input type="text" name="company"
						value="<{$company}>" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">Street Address:</td>
					<td class="fieldValue"><input type="text" name="street"
						value="<{$street}>" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">Telephone Number:</td>
					<td class="fieldValue"><input type="text" name="telephone"
						value="<{$telephone}>" />&nbsp;</td>
				</tr>
				<tr>
					<td class="fieldKey">Post Code:</td>
					<td class="fieldValue"><input type="text" name="zipCode"
						value="<{$zipCode}>" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">City:</td>
					<td class="fieldValue"><input type="text" name="city"
						value="<{$city}>" />&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				
				<tr>
					<td class="fieldKey">Country:</td>
					<td class="fieldValue">
						<select name="country" onchange="selectCountryChange(this.value);"><option value=""
								selected="selected">Please Select</option> 
							<{foreach item=country from=$listCountry}>
								<option value="<{$country->id}>" <{if $country->id == $countryId}>selected="selected"
								<{/if}>><{$country->name}></option>
							<{/foreach}>
					</select>&nbsp;<span class="inputRequirement">*</span>
					</td>
				</tr>
				<tr>
					<td class="fieldKey">State/Province:</td>
					<td class="fieldValue" id='ajaxState'>
						<select name="state" >
						<option value=""
								selected="selected">Please Select</option> 
							<{foreach item=state from=$listState}>
								<option value="<{$state->id}>"
								><{$state->name}></option>
							<{/foreach}>
					</select>&nbsp;<span class="inputRequirement">*</span>
				</tr>
			</table>
		</div>
		<div class="buttonSet">
			<span class="buttonAction"><span class="tdbLink"><div id="tdb4"
						type="button" onclick="return check_form();">Signup</div> </span>
				<script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-person"}}).addClass("ui-priority-primary").parent().removeClass("tdbLink");</script>
			</span>
		</div>
	</div>
	<input type="hidden" id="actionForm" name="actionForm" value="" />

</form>
